import React from 'react';
import http from '../../utils/http';
import './css/list.less';
import Modal from '../components/Modal2';
import Cookies from 'js-cookie'

class GoodsList extends React.Component{
  state = {
    goodsList: [],
    tdShow:false,
    evaluation:""
  }
  // 产品列表
  getGoods = () => {
    http.get('/product/find/productList')
      .then(data=> {
        this.setState({
          goodsList: data
        })
      }, err => {
        
      })
  }
  // 创建订单,完成后跳转到待支付
  createOreder = (productId) => {
    http.post('/order/recreate/order', {productId})
    .then(data=> {
      this.props.history.push(`/payOrder/?orderid=${data.id}`);
    }, err => {
      
    })
  }
  // 购买正规课,先查询有无购课记录,有的话直接创建定单,获取订单id,跳转到待支付页面,没购课记录再跳转到课程选择界面
  buyCourse = (type, productId) => { // type 1: 体验课   2:正规课
    const isLogin = Cookies.get('token');
    if (!isLogin) {
      const path = {
        pathname:'/login',
        query: '/admin/goodsList/'
      }
      this.props.history.push(path);
      return
    }
    http.get('/order/isBuyProduct', {
      params: {
        productId
      }
    })
      .then(data=> {
        if (data) {
          if (type === 2) {
            this.createOreder(productId)
          } else {
            // alert('你已购买过体验课!')
            this.setState({tdShow:true})
          }
        } else {
          this.props.history.push(`/goodsDetail/?id=${productId}`);
        }
      }, err => {
        
      })
  }
  // 赠送课程计算
  getTotalClass = (item) => {
    let str = ''
    if (item.giveClassNumber) {
      str = <span>{item.classNumber}赠{item.giveClassNumber}={item.classNumber+item.giveClassNumber}课时</span>
    } else {
      str = <span>{item.classNumber}课时</span>
    }
    return str
  }
	componentDidMount () {
    this.getGoods()
  }
  // 取消弹出框事件
  notshowEvaluation= () => {
    this.setState({tdShow: false});
  }



  render(){
    return (
      <div className="row">
        <div className="col-md-12 goods-list" style={{backgroundImage: `url(${require("../../images/backgroundImg/chooseclassbg.png")})`,backgroundSize:"1440  1024"}}>
        
          <div className="title">
            选择课程包
          </div>
          <div  className="fourpack">
            {this.state.goodsList.map((item, index) =>{
              if(index<=3){
                  return ( 
                        <div key={index} className={`col-md-3 goods-item ${item.productType === 1?'goods-tests':''}`}>
                                    <div className="colordiv" >  </div>
                                    <div className="classtype">{item.name}</div>
                                    <div className="classPrice">￥{item.presentPrice || item.originalPrice}</div>
                                    <div className="classtime">
                                      {item.hourDesc}
                                    </div>
                                    <hr/>
                                    <div>
                                       <div className="classDesc"> {item.description}</div>
                                      { item.productType === 1 ?
                                        <p className="btnbuy" onClick={() => {this.buyCourse(1, item.id)}}>立即体验</p>
                                        :
                                        <p className="btnbuy" onClick={() => {this.buyCourse(2, item.id)}}>购买</p>
                                      }
                                    </div>
                                  </div>)
              }else{
                return "";
              }
              
            })}

         
          </div>
           
          {
            // 提示模态框
            this.state.tdShow?<Modal >
                                  <div>
                                    <header className="modal-header tip-header">  
                                        <h4 className="tip">温馨提示</h4>  
                                        <span className="tipclose"
                                            onClick={()=>{
                                                this.setState({
                                                    tdShow:!this.state.tdShow
                                                  })
                                            }}>
                                            <img src={require('../../images/XX.png')} alt="xx" /> 
                                        </span>  
                                    </header>  
                                    <div className="modal-body">  
                                      <p className="testclass"> 您已经购买过体验课了</p>
                                    </div>  
                                    <footer className="modal-footer tip-footer">  
                                      <p className="cancel" onClick={this.notshowEvaluation}>知道了</p>  
                                       
                                    </footer>  
                                  </div>
                              </Modal>:''
           }  

        </div>
      </div>
    );
  }
}
export default GoodsList;